<template>
    <div>



        <div class="container">
            <el-button type="success" @click="showDepartment">添加部门</el-button>
            <el-dialog :title="this.isEdit ? '编辑部门' : '添加部门'" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="部门名称" :label-width="formLabelWidth">
                        <el-input v-model="form.deptName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="位置" :label-width="formLabelWidth">
                        <el-input v-model="form.location" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addDepartment">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="sectionContainer">

            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="deptNo" label="部门编号" width="100">
                </el-table-column>
                <el-table-column prop="deptName" label="部门名称" width="180">
                </el-table-column>
                <el-table-column prop="location" label="位置">
                </el-table-column>
                <el-table-column prop="parentDeptNo" label="上级部门编号">
                </el-table-column>
                <el-table-column prop="parentDeptName" label="上级部门名称">
                </el-table-column>

                <el-table-column prop="createTime" label="最后操作时间">
                </el-table-column>
                <el-table-column width="310" label="操作">








                    <template slot-scope="scope">
                        <el-dialog title="添加子部门" :visible.sync="dialogFormVisible2">
                            <el-form :model="form2">
                                <el-form-item label="父部门名称" :label-width="formLabelWidth">
                                    {{ deptName }}
                                </el-form-item>

                                <el-form-item label="部门名称" :label-width="formLabelWidth">
                                    <el-input v-model="form2.deptName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="位置" :label-width="formLabelWidth">
                                    <el-input v-model="form2.location" autocomplete="off"></el-input>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                <el-button type="primary" @click="sureaddSubDepartment">确 定</el-button>
                            </div>
                        </el-dialog>
                        <el-button type="success"
                            @click="addSubDepartment(scope.row.deptNo, scope.row.deptName)">添加子部门</el-button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button @click="editDep(scope.row.deptNo, scope.row.deptName, scope.row.location)"
                            type="success">编辑</el-button>
                        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                        <el-popover placement="top" width="160" v-model="scope.row.visible">
                            <p>这是一段内容这是一段内容确定删除吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="cancelFn(scope.$index)">取消</el-button>
                                <el-button type="primary" size="mini"
                                    @click="sureDelete(scope.$index, scope.row.deptNo)">确定</el-button>
                            </div>
                            <el-button slot="reference" type="warning">删除</el-button>

                        </el-popover>
                    </template>

                </el-table-column>
            </el-table>
        </div>
    </div>



</template>

<script>
import { getDepartment, addDepartment, deleteDepartment, addSubDepartmentFn } from '../../api/department'
import request from '@/utils/myrequest'
export default {
    name: 'Section',
    data() {
        return {
            isEdit: false,  // 是否是编辑
            // 添加部门的上级部门名字及编号
            deptNo: 0,
            deptName: "默认值",
            tableData: [{
                id: 1,
                name: '学工部',
                address: '2024-4-2'
            }, {
                id: 2,
                name: '教研部',
                address: '2024-4-2'
            }, {
                id: 3,
                name: '销售部',
                address: '2024-4-6'
            }, {
                id: 4,
                name: '销售部',
                address: '2024-5-2'
            }],
            labelPosition: 'right',
            formLabelAlign: {
                name: '',
                region: '',
                type: ''
            },
            data: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                    children: [{
                        label: '三级 1-1-1'
                    }]
                }]
            }, {
                label: '一级 2',
                children: [{
                    label: '二级 2-1',
                    children: [{
                        label: '三级 2-1-1'
                    }]
                }, {
                    label: '二级 2-2',
                    children: [{
                        label: '三级 2-2-1'
                    }]
                }]
            }, {
                label: '一级 3',
                children: [{
                    label: '二级 3-1',
                    children: [{
                        label: '三级 3-1-1'
                    }]
                }, {
                    label: '二级 3-2',
                    children: [{
                        label: '三级 3-2-1'
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            dialogFormVisible: false,
            dialogFormVisible2: false,
            form: {
                deptName: '',
                location: '',
            },
            form2: {
                deptName: '',
                location: ""
            },
            formLabelWidth: '120px',


        }
    },

    methods: {
        // 添加子部门
        async addSubDepartment(deptNo, deptName) {
            this.deptName = deptName;
            this.deptNo = deptNo;
            this.dialogFormVisible2 = true;

        },
        async sureaddSubDepartment() {
            let res = await addSubDepartmentFn({ deptName: this.form2.deptName, parentDeptNo: this.deptNo, location: this.form2.location });
            console.log("添加子部门结果：", res);
            if (res.data.code === 200) {
                this.getDepartmentInfo();
            }
            this.dialogFormVisible2 = false;
        },
        handleNodeClick(data) {
            console.log(data);
        },
        // 获取部门信息
        async getDepartmentInfo() {
            let { data: { rows } } = await getDepartment()
            console.log(rows);
            let mapRows = rows.map(item => ({ ...item, visible: false }))
            this.tableData = mapRows;

        },
        // 显示部门
        showDepartment() {
            this.isEdit = false;
            this.dialogFormVisible = true;
        },
        // 添加部门
        async addDepartment() {
            this.dialogFormVisible = false;
            if (this.isEdit) {
                let res = await request({
                    url: "/admin/department",
                    data:this.form,
                    method:"put"
                });
                console.log("修改", res)
                if (res.data.code === 200) {
                    this.getDepartmentInfo();
                }    
            } else {
               
                let res = await addDepartment(this.form);
                console.log("添加结果：", res)
                if (res.data.code === 200) {
                    this.getDepartmentInfo();
                }
            }


        },
        cancelFn(index) {
            this.tableData[index].visible = false;
        },
        async sureDelete(index, deptNo) {
            this.tableData[index].visible = false;
            console.log(deptNo)
            let { data: { code } } = await deleteDepartment(deptNo);
            if (code === 200) {
                this.$message('删除成功');
                await this.getDepartmentInfo();
            } else {
                this.$message('删除失败');
            }
            console.log("删除结果", code);
        },
        editDep(depNo, depName,
            location) {
            this.dialogFormVisible = true;
            this.isEdit = true;
            this.form.deptNo = depNo;
            this.form.deptName = depName;
            this.form.location = location;

        }
    },

    async mounted() {
        await this.getDepartmentInfo();

    }

}
</script>

<style scoped>
.sectionContainer {
    display: flex;
    width: 100%;
    margin-top: 20px;
}

.el-tree {
    flex: 1
}

.el-form {
    flex: 1;
}

.container {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 50px;
    padding-top: 20px;
}
</style>